import { Form, Input, Row, Col, Button } from 'antd';

const FormItem = Form.Item;

let TeamConfig = ({ fetching, onUpdate, devTeam, form }) => {
  const { getFieldProps, validateFields } = form;

  const formLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 18 }
  };
  const buttonLayout = {
    span: '18',
    offset: '4'
  };

  const nameField = getFieldProps('name', {
    initialValue: devTeam.name,
    rules: [
      { required: true, message: '开发组名称不能为空' }
    ]
  });
  const descField = getFieldProps('desc', {
    initialValue: devTeam.desc
  });

  const onSubmit = (evt) => {
    evt.preventDefault();
    validateFields((error, values) => {
      if (!!error) {
        return;
      }
      const updateDevTeam = Object.assign({}, values, { id: devTeam.id });
      onUpdate(updateDevTeam);
    });
  };

  return (
    <Form horizontal onSubmit={onSubmit} form={form}>
      <FormItem required label='名称：' {...formLayout}>
        <Input type='text' {...nameField}/>
      </FormItem>
      <FormItem label='描述：' {...formLayout}>
        <Input type='textarea' rows='10' {...descField}/>
      </FormItem>
      <Row>
        <Col {...buttonLayout}>
          <Button loading={fetching} type='primary' htmlType='submit'>确定</Button>
        </Col>
      </Row>
    </Form>
  );
};
TeamConfig = Form.create()(TeamConfig);

export default TeamConfig;
